import Base from "../base.js";
import cinemaService from "../../service/cinemaService.js";
export default class extends Base {
  constructor(props) {
    super(props);
    this.data = [];
  }
  render() {
    const template = `
          <table id="table" lay-filter="table"></table>
    `;
    this.$el.html(template);
  }
  rerender() {
    this.table.render({
      elem: '#table',
      height: 500,
      data: this.data,
      page: true, //开启分页
      cols: [
        [ //表头
          {
            field: 'name',
            title: '电影名',
            align: "center",

          }, {
            field: 'address',
            title: '影院地址',
            sort: true,
            align: "center",

          }, {
            field: 'phone',
            title: '影院电话',
            align: "center",
          },
          {
            field: 'status',
            title: '是否营业中',
            align: "center",
            templet: (status)=>status.status?"营业":"未营业"
          },
          {
            field: 'do',
            title: '操作',
            align: "center",
            toolbar: `<div>
            <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            </div>`
          },
        ]
      ]
    });
  }

  handle() {
    let that = this;
    //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    this.table.on('tool(table)', function (obj) {
      let data = obj.data;//获取当前行数据
      let layEvent = obj.event;//获得lay-event对应的值(也可以是表头的 event 参数对应的值）
      let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      if (layEvent === 'detail') { //查看
      } else if (layEvent === 'delete') { //删除
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
          that.delete(data._id);
        });

      } else if (layEvent === 'update') { //编辑
       localStorage.setItem("shu",JSON.stringify(data))//本地存储
        location.hash = "#/info/updateCinema";
      } else if (layEvent === 'LAYTABLE_TIPS') {
        layer.alert('Hi，头部工具栏扩展的右侧图标。');
      }
    });
  }

  mounted() {
    this.getCinemaService();
  }
  async getCinemaService() {
    this.data = await cinemaService.get();
    this.rerender();
  }
  async delete(data) {
    const result = await cinemaService.delete(data);
    this.getCinemaService();
  }
  // layui() {
  //   this.table.render();
  // }
}

